jquery.images-compare.js ➔ ImagesCompare - Code Metrics - Inspection of "Release 0.2.3 - (added a changelog file)" - sylvaincombes/jquery-images-compare - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( ec9704...235e41 )

by Sylvain

created 2016-10-03 12:12 UTC

jquery.images-compare.js ➔ ImagesCompare B

↳ Parent: src/assets/js/jquery.images-compare.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

396

Duplication

Lines	0
Ratio	0 %

Importance

Changes	5
Bugs	0	Features	0

Metric	Value
cc	1
c	5
b	0
f	0
nc	1
nop	2
dl	0
loc	396
rs	8.2857

How to fix Long Method

/** global: Hammer */
;(function ($, window) {
    "use strict";

    function stringRepeat(s, precision) {
        // String repeat polyfill
        if (!String.prototype.repeat) {
            precision = precision || 1;
            return new Array(precision + 1).join(s);
        }
        return s.repeat(precision);
    }

    var pluginName = 'imagesCompare',
        defaults = {
            initVisibleRatio: 0.5,
            interactionMode: "drag", // "drag", "mousemove", "click"
            animationDuration: 400, // default animation duration in ms
            animationEasing: "swing",
            addSeparator: true, // add a html element on the separation
            addDragHandle: true, // add a html drag handle element on the separation
            precision: 4
        };

    // Our object, using revealing module pattern
    function ImagesCompare(element, options) {
        element = $(element);
        options = $.extend({}, defaults, options);
        options.roundFactor = parseInt('1' + stringRepeat('0', options.precision));

        this._name = pluginName;

        var frontElement, backElement, separator, dragHandle, lastRatio = 1, size = {
            width: 0,
            height: 0,
            maxWidth: 0,
            maxHeight: 0
        }, events = {
            initialised: "imagesCompare:initialised",
            changed: "imagesCompare:changed",
            resized: "imagesCompare:resized"
        };

        function onImagesLoaded() {
            var images = element.find('img'),
                totalImagesCount= images.length,
                elementsLoaded = 0;

            function onImageLoaded(){
                if (elementsLoaded >= totalImagesCount) {
                    init();
                }
            }

            images.each(function() {
                // Image already loaded (cached)
                if ($(this)[0].complete) {
                    totalImagesCount--;
                    onImageLoaded();
                } else {
                    // Image loading / error
                    $(this).load(function() {
                        elementsLoaded++;
                        onImageLoaded();
                    });
                    $(this).error(function() {
                        elementsLoaded++;
                        onImageLoaded();
                    });
                }
            });
        }

        onImagesLoaded();

        function init() {
            updateDom();
            patchSize();
            initInteractions();

            $(frontElement).attr('ratio', options.initVisibleRatio);
            setVisibleRatio(options.initVisibleRatio);

            // Let the world know we have done the init
            element.trigger({
                type: events.initialised
            });
        }

        function addResize() {
            $(window).on('resize', function (event) {
                frontElement.css('clip', '');
                patchSize();
                setVisibleRatio(lastRatio);

                // Let the world know we have done some resize updates
                element.trigger({
                    type: events.resized,
                    originalEvent: event
                });
            });
        }

        function initInteractions() {
            options.interactionMode = options.interactionMode.toLowerCase();

            if (options.interactionMode != "drag" && options.interactionMode != "mousemove" && options.interactionMode != "click") {
                console.warn('No valid interactionMode found, valid values are "drag", "mousemove", "click"');
            }

            switch (options.interactionMode) {
                case "drag":
                    initDrag();
                    break;
                case "mousemove":
                    initMouseMove();
                    break;
                case "click":
                    initClick();
                    break;
                default:
                    initDrag();
            }
        }

        function initDrag() {
            if (typeof Hammer == 'undefined') {
                console.error('Please include the hammerjs library for drag support');
            }
            addDrag();
            addResize();
        }

        function initMouseMove() {
            addMouseMove();
            addResize();
        }

        function initClick() {
            addClick();
            addResize();
        }

        function addClick() {
            element.on('click', function (event) {
                var ratio = getElementRatio(event.pageX);
                setVisibleRatio(ratio);
            });
        }

        function addMouseMove() {
            var lastMove = 0;
            var eventThrottle = 1;
            element.on('mousemove', function (event) {
                event.preventDefault();
                var now = Date.now();
                if (now > lastMove + eventThrottle) {
                    lastMove = now;
                    var ratio = getElementRatio(event.pageX);
                    setVisibleRatio(ratio);
                }
            });

            element.on('mouseout', function (event) {
                var ratio = getElementRatio(event.pageX);
                setVisibleRatio(ratio);
            });
        }

        function addDrag() {
            var hammertime = new Hammer(element[0]);
            hammertime.get('pan').set({direction: Hammer.DIRECTION_HORIZONTAL});
            hammertime.on('pan', function (event) {
                var ratio = getElementRatio(event.srcEvent.pageX);
                setVisibleRatio(ratio);
            });
        }

        function updateDom() {
            element.addClass('images-compare-container');
            element.css('display', 'inline-block');

            frontElement = element.find('> *:nth-child(1)');
            backElement = element.find('> *:nth-child(2)');

            frontElement.addClass("images-compare-before");
            frontElement.css('display', 'block');
            backElement.addClass("images-compare-after");
            backElement.css('display', 'block');

            if (options.addDragHandle) {
                buildDragHandle();
            }

            if (options.addSeparator) {
                buildSeparator();
            }
        }

        function buildSeparator() {
            element.prepend("<div class='images-compare-separator'></div>");
            separator = element.find(".images-compare-separator");

        }

        function buildDragHandle() {
            element.prepend("<div class='images-compare-handle'></div>");
            dragHandle = element.find(".images-compare-handle");
            dragHandle.append("<span class='images-compare-left-arrow'></span>");
            dragHandle.append("<span class='images-compare-right-arrow'></span>");
        }

        function patchSize() {
            var imgRef = backElement.find('img').first();
            setSize(imgRef.width(), imgRef.height(), imgRef.naturalWidth(), imgRef.naturalHeight());
            element.css('max-width', size.maxWidth + 'px');
            element.css('max-height', size.maxHeight + 'px');
            frontElement.width(size.width);
            frontElement.height(size.height);
        }

        /**
         *
         * @param x
         * @return float
         */
        function getElementRatio(x) {
            return roundRatio((x - element.offset().left) / frontElement.width());
        }


        /**
         *
         * @param ratio
         * @return float
         */
        function roundRatio(ratio) {
            ratio = Math.round((ratio * options.roundFactor)) / options.roundFactor;
            if (ratio > 1) {
                ratio = 1;
            }

            if (ratio < 0) {
                ratio = 0;
            }

            return ratio;

        }

        /**
         * Animation request
         *
         * @param startValue float
         * @param endValue float
         * @param duration value in ms
         * @param easing linear or swing
         */
        function launchAnimation(startValue, endValue, duration, easing) {
            $(frontElement).attr('ratio', startValue).animate({ratio: startValue}, {
                duration: 0
            });

            $(frontElement).stop().attr('ratio', startValue).animate({ratio: endValue}, {
                duration: duration,
                easing: easing,
                step: function (now) {
                    var width = getRatioValue(now);
                    lastRatio = now;
                    frontElement.attr('ratio', now).css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)');

                    if (options.addSeparator) {
                        separator.css('left', width + 'px');
                    }

                    if (options.addDragHandle) {
                        dragHandle.css('left', width + 'px');
                    }
                },
                done: function (animation, jumpedToEnd) {
                    var ratio = $(frontElement).attr('ratio');
                    // Let the world know something has changed
                    element.trigger({
                        type: events.changed,
                        ratio: ratio,

                        value: getRatioValue(ratio),
                        animate: true,
                        animation : animation,
                        jumpedToEnd: jumpedToEnd
                    });
                }
            });
        }

        /**
         * Get value to reach, based on a ratio
         *
         * @param ratio float
         * @return {number}
         */
        function getRatioValue(ratio) {
            ratio = Math.round((ratio * options.roundFactor)) / options.roundFactor;
            return Math.round(frontElement.width() * ratio);
        }

        /**
         * Change visible ratio
         *
         * @param ratio float
         * @param animate boolean Do we want an animation ?
         * @param duration in ms
         * @param easing 'swing', 'linear'
         */
        function setVisibleRatio(ratio, animate, duration, easing) {
            if (typeof animate == 'undefined') {
                animate = false;
            }

            var width = getRatioValue(ratio);

            if (animate) {
                var finalDuration = duration ? duration : options.animationDuration;
                var finalEasing = easing ? easing : options.animationEasing;

                launchAnimation(lastRatio, ratio, finalDuration, finalEasing);

                // Let the world know something has changed
                if (lastRatio != ratio) {
                    element.trigger({
                        type: events.changed,
                        ratio: lastRatio,
                        value: width,
                        animate: animate
                    });
                }

                return;

            } else {
                frontElement.stop().css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)');

                if (options.addSeparator) {
                    $(separator).stop().css('left', width + 'px');
                }

                if (options.addDragHandle) {
                    dragHandle.css('left', width + 'px');
                }
            }

            // Let the world know something has changed
            if (lastRatio != ratio) {
                element.trigger({
                    type: events.changed,
                    ratio: ratio,
                    value: width,
                    animate: animate
                });
            }

            lastRatio = ratio;
        }

        function setSize(width, height, maxWidth, maxHeight) {
            if (typeof width != 'undefined') {
                setWidth(width);
            }
            if (typeof height != 'undefined') {
                setHeight(height);
            }
            if (typeof maxWidth != 'undefined') {
                setMaxWidth(maxWidth);
            }
            if (typeof maxHeight != 'undefined') {
                setMaxHeight(maxHeight);
            }
            return size;
        }

        function setWidth(width) {
            size.width = width;
            return size;
        }

        function setMaxWidth(maxWidth) {
            size.maxWidth = maxWidth;
            return size;
        }

        function setHeight(height) {
            size.height = height;
            return size;
        }

        function setMaxHeight(maxHeight) {
            size.maxHeight = maxHeight;
            return size;
        }

        // public function declaration
        // returning element to preserve chaining
        return {
            "setValue": function (ratio, animate, duration, easing) {
                setVisibleRatio(ratio, animate, duration, easing);
                return element;
            },
            "getValue": function () {
                return lastRatio;
            },
            "on": function (eventName, callback) {
                element.on(eventName, callback);
                return element;
            },
            "off": function (eventName, callback) {
                element.off(eventName, callback);
                return element;
            },
            "events": function () {
                return events;
            }
        };
    }


    /**
     * Plugin declaration
     *
     * @param userOptions
     * @return {*}
     */
    $.fn.imagesCompare = function (userOptions) {
        var options = $.extend(defaults, userOptions);
        return this.each(function () {
            if (!$.data(this, pluginName)) {
                $.data(this, pluginName, new ImagesCompare(this, options));
            }
        });
    };

})(jQuery, window, document);

// http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
(function ($) {
    var props = ['Width', 'Height'], prop, propsLength;

    propsLength = props.length;

    for (var index = 0; index < propsLength; index++) {
        prop = props[index];
        /*jslint loopfunc: true */
        (function (natural, prop) {
            $.fn[natural] = (natural in document.createElement('img')) ?
                function () {
                    return this[0][natural];
                } :
                function () {
                    var
                        node = this[0],
                        img,
                        value = 0;

                    if (node.tagName.toLowerCase() === 'img') {
                        img = document.createElement('img');
                        img.src = node.src;
                        value = img[prop];
                    }
                    return value;
                };
        }('natural' + prop, prop.toLowerCase()));
        /*jslint loopfunc: false */
    }
}(jQuery));


1			/** global: Hammer */
2			;(function ($, window) {
3			"use strict";
4
5			function stringRepeat(s, precision) {
6			// String repeat polyfill
7			if (!String.prototype.repeat) {
8			precision = precision \|\| 1;
9			return new Array(precision + 1).join(s);
10			}
11			return s.repeat(precision);
12			}
13
14			var pluginName = 'imagesCompare',
15			defaults = {
16			initVisibleRatio: 0.5,
17			interactionMode: "drag", // "drag", "mousemove", "click"
18			animationDuration: 400, // default animation duration in ms
19			animationEasing: "swing",
20			addSeparator: true, // add a html element on the separation
21			addDragHandle: true, // add a html drag handle element on the separation
22			precision: 4
23			};
24
25			// Our object, using revealing module pattern
26			function ImagesCompare(element, options) {
27			element = $(element);
28			options = $.extend({}, defaults, options);
29			options.roundFactor = parseInt('1' + stringRepeat('0', options.precision));
30
31			this._name = pluginName;
32
33			var frontElement, backElement, separator, dragHandle, lastRatio = 1, size = {
34			width: 0,
35			height: 0,
36			maxWidth: 0,
37			maxHeight: 0
38			}, events = {
39			initialised: "imagesCompare:initialised",
40			changed: "imagesCompare:changed",
41			resized: "imagesCompare:resized"
42			};
43
44			function onImagesLoaded() {
45			var images = element.find('img'),
46			totalImagesCount= images.length,
47			elementsLoaded = 0;
48
49			function onImageLoaded(){
50			if (elementsLoaded >= totalImagesCount) {
51			init();
52			}
53			}
54
55			images.each(function() {
56			// Image already loaded (cached)
57			if ($(this)[0].complete) {
58			totalImagesCount--;
59			onImageLoaded();
60			} else {
61			// Image loading / error
62			$(this).load(function() {
63			elementsLoaded++;
64			onImageLoaded();
65			});
66			$(this).error(function() {
67			elementsLoaded++;
68			onImageLoaded();
69			});
70			}
71			});
72			}
73
74			onImagesLoaded();
75
76			function init() {
77			updateDom();
78			patchSize();
79			initInteractions();
80
81			$(frontElement).attr('ratio', options.initVisibleRatio);
82			setVisibleRatio(options.initVisibleRatio);
83
84			// Let the world know we have done the init
85			element.trigger({
86			type: events.initialised
87			});
88			}
89
90			function addResize() {
91			$(window).on('resize', function (event) {
92			frontElement.css('clip', '');
93			patchSize();
94			setVisibleRatio(lastRatio);
95
96			// Let the world know we have done some resize updates
97			element.trigger({
98			type: events.resized,
99			originalEvent: event
100			});
101			});
102			}
103
104			function initInteractions() {
105			options.interactionMode = options.interactionMode.toLowerCase();
106
107			if (options.interactionMode != "drag" && options.interactionMode != "mousemove" && options.interactionMode != "click") {
108			console.warn('No valid interactionMode found, valid values are "drag", "mousemove", "click"');
109			}
110
111			switch (options.interactionMode) {
112			case "drag":
113			initDrag();
114			break;
115			case "mousemove":
116			initMouseMove();
117			break;
118			case "click":
119			initClick();
120			break;
121			default:
122			initDrag();
123			}
124			}
125
126			function initDrag() {
127			if (typeof Hammer == 'undefined') {
128			console.error('Please include the hammerjs library for drag support');
129			}
130			addDrag();
131			addResize();
132			}
133
134			function initMouseMove() {
135			addMouseMove();
136			addResize();
137			}
138
139			function initClick() {
140			addClick();
141			addResize();
142			}
143
144			function addClick() {
145			element.on('click', function (event) {
146			var ratio = getElementRatio(event.pageX);
147			setVisibleRatio(ratio);
148			});
149			}
150
151			function addMouseMove() {
152			var lastMove = 0;
153			var eventThrottle = 1;
154			element.on('mousemove', function (event) {
155			event.preventDefault();
156			var now = Date.now();
157			if (now > lastMove + eventThrottle) {
158			lastMove = now;
159			var ratio = getElementRatio(event.pageX);
160			setVisibleRatio(ratio);
161			}
162			});
163
164			element.on('mouseout', function (event) {
165			var ratio = getElementRatio(event.pageX);
166			setVisibleRatio(ratio);
167			});
168			}
169
170			function addDrag() {
171			var hammertime = new Hammer(element[0]);
172			hammertime.get('pan').set({direction: Hammer.DIRECTION_HORIZONTAL});
173			hammertime.on('pan', function (event) {
174			var ratio = getElementRatio(event.srcEvent.pageX);
175			setVisibleRatio(ratio);
176			});
177			}
178
179			function updateDom() {
180			element.addClass('images-compare-container');
181			element.css('display', 'inline-block');
182
183			frontElement = element.find('> *:nth-child(1)');
184			backElement = element.find('> *:nth-child(2)');
185
186			frontElement.addClass("images-compare-before");
187			frontElement.css('display', 'block');
188			backElement.addClass("images-compare-after");
189			backElement.css('display', 'block');
190
191			if (options.addDragHandle) {
192			buildDragHandle();
193			}
194
195			if (options.addSeparator) {
196			buildSeparator();
197			}
198			}
199
200			function buildSeparator() {
201			element.prepend("<div class='images-compare-separator'></div>");
202			separator = element.find(".images-compare-separator");
203
204			}
205
206			function buildDragHandle() {
207			element.prepend("<div class='images-compare-handle'></div>");
208			dragHandle = element.find(".images-compare-handle");
209			dragHandle.append("<span class='images-compare-left-arrow'></span>");
210			dragHandle.append("<span class='images-compare-right-arrow'></span>");
211			}
212
213			function patchSize() {
214			var imgRef = backElement.find('img').first();
215			setSize(imgRef.width(), imgRef.height(), imgRef.naturalWidth(), imgRef.naturalHeight());
216			element.css('max-width', size.maxWidth + 'px');
217			element.css('max-height', size.maxHeight + 'px');
218			frontElement.width(size.width);
219			frontElement.height(size.height);
220			}
221
222			/**
223			*
224			* @param x
225			* @return float
226			*/
227			function getElementRatio(x) {
228			return roundRatio((x - element.offset().left) / frontElement.width());
229			}
			0 ignored issues – show Duplication introduced 2016-07-01 08:03 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
230
231			/**
232			*
233			* @param ratio
234			* @return float
235			*/
236			function roundRatio(ratio) {
237			ratio = Math.round((ratio * options.roundFactor)) / options.roundFactor;
238			if (ratio > 1) {
239			ratio = 1;
240			}
241
242			if (ratio < 0) {
243			ratio = 0;
244			}
245
246			return ratio;
247
248			}
249
250			/**
251			* Animation request
252			*
253			* @param startValue float
254			* @param endValue float
255			* @param duration value in ms
256			* @param easing linear or swing
257			*/
258			function launchAnimation(startValue, endValue, duration, easing) {
259			$(frontElement).attr('ratio', startValue).animate({ratio: startValue}, {
260			duration: 0
261			});
262
263			$(frontElement).stop().attr('ratio', startValue).animate({ratio: endValue}, {
264			duration: duration,
265			easing: easing,
266			step: function (now) {
267			var width = getRatioValue(now);
268			lastRatio = now;
269			frontElement.attr('ratio', now).css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)');
270
271			if (options.addSeparator) {
272			separator.css('left', width + 'px');
273			}
274
275			if (options.addDragHandle) {
276			dragHandle.css('left', width + 'px');
277			}
278			},
279			done: function (animation, jumpedToEnd) {
280			var ratio = $(frontElement).attr('ratio');
281			// Let the world know something has changed
282			element.trigger({
283			type: events.changed,
284			ratio: ratio,
			0 ignored issues – show Duplication introduced 2016-07-01 08:03 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
285			value: getRatioValue(ratio),
286			animate: true,
287			animation : animation,
288			jumpedToEnd: jumpedToEnd
289			});
290			}
291			});
292			}
293
294			/**
295			* Get value to reach, based on a ratio
296			*
297			* @param ratio float
298			* @return {number}
299			*/
300			function getRatioValue(ratio) {
301			ratio = Math.round((ratio * options.roundFactor)) / options.roundFactor;
302			return Math.round(frontElement.width() * ratio);
303			}
304
305			/**
306			* Change visible ratio
307			*
308			* @param ratio float
309			* @param animate boolean Do we want an animation ?
310			* @param duration in ms
311			* @param easing 'swing', 'linear'
312			*/
313			function setVisibleRatio(ratio, animate, duration, easing) {
314			if (typeof animate == 'undefined') {
315			animate = false;
316			}
317
318			var width = getRatioValue(ratio);
319
320			if (animate) {
321			var finalDuration = duration ? duration : options.animationDuration;
322			var finalEasing = easing ? easing : options.animationEasing;
323
324			launchAnimation(lastRatio, ratio, finalDuration, finalEasing);
325
326			// Let the world know something has changed
327			if (lastRatio != ratio) {
328			element.trigger({
329			type: events.changed,
330			ratio: lastRatio,
331			value: width,
332			animate: animate
333			});
334			}
335
336			return;
337
338			} else {
339			frontElement.stop().css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)');
340
341			if (options.addSeparator) {
342			$(separator).stop().css('left', width + 'px');
343			}
344
345			if (options.addDragHandle) {
346			dragHandle.css('left', width + 'px');
347			}
348			}
349
350			// Let the world know something has changed
351			if (lastRatio != ratio) {
352			element.trigger({
353			type: events.changed,
354			ratio: ratio,
355			value: width,
356			animate: animate
357			});
358			}
359
360			lastRatio = ratio;
361			}
362
363			function setSize(width, height, maxWidth, maxHeight) {
364			if (typeof width != 'undefined') {
365			setWidth(width);
366			}
367			if (typeof height != 'undefined') {
368			setHeight(height);
369			}
370			if (typeof maxWidth != 'undefined') {
371			setMaxWidth(maxWidth);
372			}
373			if (typeof maxHeight != 'undefined') {
374			setMaxHeight(maxHeight);
375			}
376			return size;
377			}
378
379			function setWidth(width) {
380			size.width = width;
381			return size;
382			}
383
384			function setMaxWidth(maxWidth) {
385			size.maxWidth = maxWidth;
386			return size;
387			}
388
389			function setHeight(height) {
390			size.height = height;
391			return size;
392			}
393
394			function setMaxHeight(maxHeight) {
395			size.maxHeight = maxHeight;
396			return size;
397			}
398
399			// public function declaration
400			// returning element to preserve chaining
401			return {
402			"setValue": function (ratio, animate, duration, easing) {
403			setVisibleRatio(ratio, animate, duration, easing);
404			return element;
405			},
406			"getValue": function () {
407			return lastRatio;
408			},
409			"on": function (eventName, callback) {
410			element.on(eventName, callback);
411			return element;
412			},
413			"off": function (eventName, callback) {
414			element.off(eventName, callback);
415			return element;
416			},
417			"events": function () {
418			return events;
419			}
420			};
421			}
422
423
424			/**
425			* Plugin declaration
426			*
427			* @param userOptions
428			* @return {*}
429			*/
430			$.fn.imagesCompare = function (userOptions) {
431			var options = $.extend(defaults, userOptions);
432			return this.each(function () {
433			if (!$.data(this, pluginName)) {
434			$.data(this, pluginName, new ImagesCompare(this, options));
435			}
436			});
437			};
438
439			})(jQuery, window, document);
440
441			// http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
442			(function ($) {
443			var props = ['Width', 'Height'], prop, propsLength;
444
445			propsLength = props.length;
446
447			for (var index = 0; index < propsLength; index++) {
448			prop = props[index];
449			/jslint loopfunc: true /
450			(function (natural, prop) {
451			$.fn[natural] = (natural in document.createElement('img')) ?
452			function () {
453			return this[0][natural];
454			} :
455			function () {
456			var
457			node = this[0],
458			img,
459			value = 0;
460
461			if (node.tagName.toLowerCase() === 'img') {
462			img = document.createElement('img');
463			img.src = node.src;
464			value = img[prop];
465			}
466			return value;
467			};
468			}('natural' + prop, prop.toLowerCase()));
469			/jslint loopfunc: false /
470			}
471			}(jQuery));
472

sylvaincombes / jquery-images-compare

Push — master ( ec9704...235e41 )

jquery.images-compare.js ➔ ImagesCompare B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like